<template>
	<view class="header">
		<view class="mjcheader">
			<uni-datetime-picker type="daterange" v-model="itemrange" @change="change" />
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startDate: "",
				endDate: '',
				itemrange: []
			}
		},
		methods: {
			change(e) {
				this.$emit('searchclick', e)
			},
			getTodayMinus30Days() {
				const today = new Date(); // 获取当前日期
				const thirtyDaysAgo = new Date(today); // 复制当前日期

				// 计算并设置日期为前30天的日期
				thirtyDaysAgo.setDate(today.getDate() - 30);

				return this.formatDate(thirtyDaysAgo);
			},
			getTodayDate() {
				const today = new Date(); // 获取当前日期
				return this.formatDate(today);
			},
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1并补零
				const day = String(date.getDate()).padStart(2, '0'); // 补零操作

				return `${year}-${month}-${day}`;
			},

		},
		created() {
			const startDate = this.getTodayMinus30Days()
			const endDate = this.getTodayDate()
			this.itemrange = [startDate, endDate]

		},
		mounted() {
			this.$emit('searchclick', [this.startDate, this.endDate])
		}
	}
</script>

<style scoped lang="less">
	.header {
		padding: 0 15rpx;
		background-color: #ffffff;

		.mjcheader {
			height: 36px;
			display: flex;
			flex-direction: row;
			position: relative;
			padding: 10px;
			justify-content: center;

			&_main {
				border-radius: 5px;
				background-color: #f8f8f8;
				display: flex;
				box-sizing: border-box;
				position: relative;
				flex: 1;
				justify-content: center;
				flex-direction: row;
				align-items: center;
				height: 36px;
				padding: 5px 8px 5px 0px;

				&_icon {
					display: flex;
					flex-direction: row;
					padding: 0 8px;
					justify-content: center;
					align-items: center;
					color: #b3b3b3;
				}
			}
		}
	}
</style>
